﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.PrintTemplates.DesignModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "设计打印模板";
}
@section styles
{
    <abp-style src="/Pages/PrintTemplates/Design.css"></abp-style>
    <abp-style src="/hiprint/css/print-lock.css"></abp-style>
    <abp-style src="/hiprint/css/hiprint.css"></abp-style>
    <abp-style src="/hiprint/css/hiprint.css" media="print" ></abp-style>
    <abp-style src="/hiprint/jquery.minicolors/jquery.minicolors.min.css"></abp-style>
}
@section scripts
{
    <abp-script src="/hiprint/jquery.minicolors/jquery.minicolors.min.js"></abp-script>

    <abp-script src="/Pages/PrintTemplates/Design.cshtml.js"></abp-script>
    <!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
    <abp-script src="/hiprint/polyfill.min.js"></abp-script>
    <!-- hiprint 核心js-->
    <abp-script src="/hiprint/hiprint.bundle.js"></abp-script>
    <!-- 条形码生成组件-->
    <abp-script src="/hiprint/plugins/JsBarcode.all.min.js"></abp-script>
    <!-- 二维码生成组件-->
    <abp-script src="/hiprint/plugins/qrcode.js"></abp-script>
    <!-- 调用浏览器打印窗口helper类-->
    <abp-script src="/hiprint/plugins/jquery.hiwprint.js"></abp-script>
    <!-- 定义打印元素 -->
    <abp-script src="/Pages/PrintTemplates/ElementTypeProvider.js"></abp-script>
    
}
<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{department?department.name:''}}-{{deviceType?deviceType.name:''}}-{{name?name:''}}</span>
            </div>
        </div>
        <el-row class="toolbar_row">
            <el-col :span="6" >
                <div class="grid-content bg-purple-dark">
                    <el-tag v-for="(item,index) in paperTypes"
                            type="primary"
                            :key="item.id"
                            :effect="item.id ===paperType ? 'dark':'light'"
                            v-on:click="setPaper(item.id)"
                            style="margin-left:15px;"
                            >
                        {{item.name}}
                    </el-tag>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple-dark">
                    <div class="grid-content bg-purple-dark " style="padding-left:10px;">
                            <el-input v-model="width" type="number" size="mini" placeholder="宽/mm"></el-input>
                    </div>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple-dark">
                    <div class="grid-content bg-purple-dark" style="padding-left:10px;">
                        <el-input v-model="height" size="mini" type="number" placeholder="高/mm"></el-input>
                    </div>
                </div>
            </el-col>
            <el-col :span="11">
                <div class="grid-content bg-purple-dark">
                    <div class="grid-content bg-purple-dark">
                        <div class="paper-setter" style="margin-left:10px;">
                            <el-button v-on:click="setPaper('custom')" size="mini">自定义</el-button>
                            <el-button v-on:click="rotatePaper()" size="mini">旋 转</el-button>
                            <el-button v-on:click="clearTemplate()" size="mini">清 空</el-button>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="preview"  size="mini" >预览</el-button>
                    <el-button v-on:click="saveSchema" type="info" icon="fa fa-floppy-disk" size="mini">保存</el-button>
                </div>
            </el-col>
           
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <!--拖拽列表-->
            <div class="rect-printElement-types hiprintEpContainer">
                <ul class="hiprint-printElement-type">
                    <li>
                        <span class="title"><code>拖拽列表</code></span>
                        <ul>
                            <li>
                                <a class="ep-draggable-item" tid="testModule.text" style="">
                                    <i  class="fa  fa-text-width pull-item-icon"></i>
                                    <span class="glyphicon-class">文本</span>
                                </a>
                            </li>

                            <li>
                                <a class="ep-draggable-item" tid="testModule.image" style="">
                                    <i class="fa fa-image pull-item-icon"></i>
                                    <span class="glyphicon-class">图片</span>
                                </a>
                            </li>
                            <li>
                                <a class="ep-draggable-item" tid="testModule.longText">
                                    <i class="fa  fa-text-width pull-item-icon"></i>
                                    <span class="glyphicon-class">长文本</span>
                                </a>
                            </li>

                            <li>
                                <a class="ep-draggable-item" tid="testModule.tableCustom" style="">
                                    <i class="fa fa-table pull-item-icon"></i>
                                    <span class="glyphicon-class">表格</span>
                                </a>
                            </li>

                            <li>
                                <a class="ep-draggable-item" tid="testModule.html">
                                    <i class="fa fa-code pull-item-icon"></i>
                                    <span class="glyphicon-class">html</span>
                                </a>
                            </li>

                        </ul>
                    </li>
                    <li>
                        <span class="title">辅助</span>
                        <ul>
                            <li>
                                <a class="ep-draggable-item" tid="testModule.hline" style="">

                                    <i class="fa fa-arrows-left-right pull-item-icon"></i>
                                    <span class="glyphicon-class">横线</span>
                                </a>
                            </li>

                            <li>
                                <a class="ep-draggable-item" tid="testModule.vline" style="">
                                    <i class="fa fa-arrows-up-down pull-item-icon"></i>
                                    <span class="glyphicon-class">竖线</span>
                                </a>
                            </li>
                            <li>
                                <a class="ep-draggable-item" tid="testModule.rect">
                                    <div style="background-color:#b9a5a6;width:60px;height:30px;margin-top:10px;margin-left:10px;margin-bottom:5px;">

                                    </div>
                                    <span class="glyphicon-class">矩形</span>
                                </a>
                            </li>
                            <li>
                                <a class="ep-draggable-item" tid="testModule.oval">
                                    <i class="fa fa-circle pull-item-icon"></i>
                                    <span class="glyphicon-class">椭圆</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--设计器主体-->
            <div class="desiner-container">
                <div id="hiprint-printTemplate" class="hiprint-printTemplate">
                </div>
            </div>
            
            <!--打印元素配置面板-->
            <div class="options-container">
                <div id="PrintElementOptionSetting">
                </div>
            </div>
        </div>
    </div>
</div>
